import { useState } from 'react';
import {  Button,Space,Radio,DatePicker,ConfigProvider } from 'antd';
import type { RadioChangeEvent } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'; 
const { RangePicker } = DatePicker;


const HeadButton = (props :any)=>{
  let {getFinanceData,outPut} = props
  const CardButton = [
    { label: '全部', value: 'all' },
    { label: '最近30天', value: 'late30' },
    { label: '最近90天', value: 'late90' },
  ];
  const [value, setValue] = useState('all');
  const RadioChange = ({ target: { value } }: RadioChangeEvent)=>{
    if(value === 'all'){
      getFinanceData()
    }else if(value === 'late30'){
      getFinanceData({recentDay:30})
    }else if(value === 'late90'){
      getFinanceData({recentDay:90})
    }
    setValue(value);
  }
  const chooseTime=(val:any,time:any) => {
    getFinanceData({minTime:time[0],maxTime:time[1]})
  }
  return (
    <>
    <Space>
    <Button type="primary" className='edmit' onClick={outPut}>导出</Button>
    <Radio.Group 
      onChange={RadioChange} 
      options={CardButton}
      value={value}
      optionType="button"
      buttonStyle="solid"
    >
    </Radio.Group>
    <ConfigProvider locale={ zhCN }>
      <RangePicker onChange={chooseTime} showTime />
    </ConfigProvider>
    </Space>
    </>
  )
}

export default HeadButton